<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .active {
            background-color: red;
        }

        .text-danger {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 动态class -->
        <!--01: 对象语法 -->
        <p @click="isActive=!isActive" :class="{active:isActive,'text-danger':danger}">class 的对象形式</p>
        <!--02: 对象形式  -->
        <p :class="classObj">对象形式2</p>
        <!-- 03: 数组形式 -->
        <p :class='[active,textdanger]'>数组形式</p>
        <!-- 04: 数组中使用三元运算符 -->
        <p :class="[isActive?'active':'','text-danger']">数组中使用三元运算符</p>
        <!-- 05:数组中结合使用对象 -->
        <p :class="[{active:isActive},'text-danger']">数组中结合使用对象</p>


        <!-- 动态style 设置内联样式 -->
        <!-- 01: 对象形式 -->
        <p :style="{color:greencolor,fontSize:font30+'px'}">动态style</p>
        <!-- 02:直接复制对象数据 -->
        <p :style="styleObject">动态style直接赋值对象</p>
        <!--03:使用数组形式  -->
        <p :style="[style1,style2]">数组形式样式</p>
    </div>

</body>

</html>
<script>
    // 知识点: 动态样式绑定
    // class 绑定 
    // 01: 对象形式
    // style绑定
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                isActive: true,
                danger: true,
                classObj: {
                    active: true,
                    'text-danger': true,
                },
                active: 'active',
                textdanger: 'text-danger',
                greencolor: 'green',
                font30: 30,
                styleObject: {
                    color: 'red',
                    fontSize: '13px'
                },
                style1: {
                    border: '5px solid black'
                },
                style2: {
                    color: 'deeppink'
                }
            }
        }
    }).mount('#app')


</script>